<template>
	<!-- main S -->
    <view class="main">
		<!-- top S -->
        <view class="top">
			<!-- titleBox S -->
			<view class="titleBox">
				<text class="title">红包订单</text>
				<text class="redPackTitle">红包到账时间 > </text>
				<view class="clear_both"></view>
			</view>
			<!-- titleBox E -->
			<!-- channelBox S -->
			<view class="channelBox">
				<view class="channel" v-for="(item,index) in channelList" :key="index" @tap="goOrderList" :id="item.id" >
					<image src="../../static/logo.png" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<view class="clear_both"></view>
			</view>
			<!-- channelBox E -->
		</view>
		<!-- top E -->
    </view>
	<!-- main E -->
</template>

<script>
	export default {
		data() {
			return {
				title: 'Order',
				channelList: [
					{
						id : 1,
						name : "淘宝",
						icon : "../../static/logo.png"
					},
					{
						id : 2,
						name : "京东",
						icon : "../../static/logo.png"
					},
					{
						id : 3,
						name : "拼多多",
						icon : "../../static/logo.png"
					},
					{
						id : 4,
						name : "电费",
						icon : "../../static/logo.png"
					},
					{
						id : 5,
						name : "电影票",
						icon : "../../static/logo.png"
					},
					{
						id : 6,
						name : "加油",
						icon : "../../static/logo.png"
					},
					{
						id : 7,
						name : "话费",
						icon : "../../static/logo.png"
					},
					{
						id : 8,
						name : "火车票",
						icon : "../../static/logo.png"
					},
					{
						id : 9,
						name : "视频会员",
						icon : "../../static/logo.png"
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			// 跳转到订单列表
			goOrderList(e){
				let channelId = e.currentTarget.id;
				uni.navigateTo({
					url: `./order_list?channelId=${channelId}`
				})
			}
		}
	}
</script>


<style>
	.top{
		width: 98%;
		border: 0rpx solid red;
		margin: 0 auto;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.top>.titleBox>text{
		display: inline-block;
		float: left;
		border: 0rpx solid red;
	}
	.top>.titleBox>.title{
		font-size: 40rpx;
		width: 200rpx;
		margin-left: 30rpx;
		font-weight: bold;
	}
	.top>.titleBox>.redPackTitle{
		float: right;
		margin-right: 20rpx;
		font-size: 24rpx;
		padding: 6rpx;
		border-radius: 25rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		border: 1rpx solid #F0AD4E;
		color: #DD524D;
	}
	
	.top>.channelBox{
		width: 95%;
		border: 0rpx solid red;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.top>.channelBox>.channel{
		height: 140rpx;
		width: 140rpx;
		border: 0rpx solid blue;
		float: left;
		margin-right: 32rpx;
		margin-bottom: 20rpx;
	}
	.top>.channelBox>.channel>image{
		display: block;
		height: 80%;
		width: 80%;
		border: 0rpx solid blue;
		border-radius: 50%;
		margin: 0 auto;
	}
	.top>.channelBox>.channel>text{
		display: block;
		width: 100%;
		border: 0rpx solid red;
		text-align: center;
		font-size: 24rpx;
	}
</style>
